<!DOCTYPE html>
<html>
<head>
<title>乘法口诀</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style>
	label{display:block;margin:4px 0;}
/*	table td{
		padding:2px;
		width:20%;
		text-align:left;
	}
	tr{
		line-height:35px;
	}*/
	.ans-div{
		float:left;
		width:80px;
		text-align:left;
	}
	.timo{
		text-align:left;
		line-height:35px;
		font-size:22px;
	}
  @media screen and (min-width: 670px){
  	.timo{
  		width:33%;
			float:left;
		}
  }  
  @media screen and (max-width:670px){
  	.timo{width:100%;}
  }
  
</style>
<style media="print">   
  .no-print   {   DISPLAY:   none;}
  .timo{
		width:33%;
		float:left;
		font-size:18px;
	}
</style>  
</head>

<body>
	<div class="no-print">
		<label>乘法口诀练习题使用说明</label>
		<label>使用电脑打开，修改希望得到的题目长度，点击刷新题目，然后将生成的内容拷贝到excel就可以打印了</label>
		<label>特别说明：因为当前没有两数相加未过10</label>
		<div>
			题目长度：<input id="len" type="number" value="2" disabled><button onclick="tiku()">生成并打印题目</button>
		</div>
	</div>
	<h1 style="text-align:center;">题目库</h1>
	<image style="width:100px;position:absolute;top:0;right:0;" src="./2.jpg"/>
	<image class="no-print" style="width:230px;position:absolute;top:0;right:0;" src="./1.jpg"/>
	<div id="tiku">
	</div>
	
	<div id="answer">
		
	</div>
</body>

</html>
<script language="javascript">
	var ans = [];
	function timo(len){
		//加还是减
		var cheng = Math.random()>0.5?true:false;
		//第一个数
		var a = Math.floor(Math.random()*8)+1 ;
		//第二个数
		var b = Math.floor(Math.random()*8)+1 ;
		
		ans.push(to2(ans.length+1)+'题:'+(cheng?(a*b):b));
		return cheng?(a+'×'+b+'='):(a*b+'÷'+a+'=');
	}
	function to2(v){
		return ('0'+v).replace(/^0*(?=\d{2})/,"");
	}
	var column = 4,rows = 19;
	function tiku(){
		var noLen = document.getElementById('len').value;
		if(noLen < 2)return;
		var context=[];
		ans=[];
		var index=1;
		for(var i=0;i<rows;i++){
//			context.push("<tr>");
			for(var j=0;j < column;j++){
//				context.push("<div class='timo'>"+(to2(index)+'题:')+timo(noLen)+"</div>");
				context.push("<div class='timo'>"+timo(noLen)+"</div>");
				index++;
			}
//			context.push("</tr>");
		}
		document.getElementById('tiku').innerHTML = context.join("");
//		document.getElementById('answer').innerHTML = "<h1>答案:</h1><div class='ans-div'>"+ans.join("</div><div class='ans-div'>")+"</div>";
		window.print()
	}
</script>